<template>
    <div class="wrap">
        <Tips :msg="tipsMsg" v-show="tipShow"/>
        <div class="login">
            <p>没有账号？</p>
            <p>点击此处去注册</p>
            <p class="register" @click="goRegister">注册</p>

            <div class="login-outer">
                <LoginRight 
                    type="登陆"
                />
                <LoginBtn type="登陆" @click.native="sendLoginRequest()"/>
            </div>
        </div>    
    </div>
</template>

<script>
    import {mapState} from 'vuex'
    import LoginBtn from '@/components/LoginBtn'
    import LoginRight from '@/components/LoginRight'
    import Tips from '../components/Tips.vue'
    export default {
        name:"Login-Component",
        data(){
            return {
                username:"",
                password:""
            }
        },
        components:{LoginRight,LoginBtn,Tips},
        methods:{
            goRegister(){
                this.$router.push('/register')
            },
            sendLoginRequest(){
                this.$store.dispatch('LoginRegister/login',{username:this.username,password:this.password})
                setTimeout(()=>{
                    const user = sessionStorage.getItem('user')
                    if(user){
                        this.$router.push('/home')
                    }
                },500)
            }
        },
        mounted() {
            this.$bus.$on('sendUserInfo',userinfo=>{
                this.username = userinfo.username
                this.password = userinfo.password
            })
        },
        computed:{
            ...mapState('LoginRegister',['tipsMsg','tipShow'])
        }
    }
</script>

<style scoped lang="less">
    .wrap{
        
        .login{
            width: 65.1vw;
            height: 13vw;
            background: #333;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            color: #fff;
            display: flex;
            flex-direction: column;
            justify-content: center;
            
            p{
                margin-left:4vw;
                font-size: 1.3vw;
                line-height: 2vw;
            }

            .register{
                width: 6.5vw;
                border: 1px solid #ccc;
                cursor: pointer;
                text-align: center;
                margin-top: 1.3vw;
            }
        }

        .login-outer{
            width: 35vw;
            height: 30vw;
            background: #fff;
            position: absolute;
            right: 0;
            box-shadow: 0 0 10px 10px rgba(51, 51, 51, 0.274);
            color: #333;
        }
            

    }
</style>